<template>
  <div class="">
    <!-- <h2 class="function-header">课程详情</h2> -->
    <div class="course-detail-container">
      <!-- 课程封面和基本信息 -->
      <div class="course-info">
        <div class="course-cover" v-if="courseInfo">
          <img
            :src="courseInfo?.coverImg"
            alt="课程封面"
          />
        </div>
        <div class="course-details">
          
          <h1 class="course-title">
            <span>{{ courseInfo.name }}</span>
            <div class="course-tags">
              <el-tag type="warning">认证学习</el-tag>
              <!-- <el-tag type="warning">国家精品</el-tag> -->
            </div>
          </h1>
          <div class="course-time-info">
            <div class="course-schedule" v-if="curseInstanceId">
              <el-select v-model="curseInstanceId" v-if="curseInstanceList.length > 0" placeholder="选择开课期数" style="width: 150px" @change="changeCourseInstance">
                <el-option
                  v-for="item in curseInstanceList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
              <p class="info-p">开课时间：{{ dayjs(curseInstance.startTime).format("YYYY年MM月DD日") }} ~ {{ dayjs(curseInstance.endTime).format("YYYY年MM月DD日") }}</p>
              <!-- <p class="info-p">距离结束还有：天</p> -->
              <p class="info-now-time" v-if="curseInstance?.finish">已完成</p>
              <div class="course-status">
                <p class="info-now-time">课程学分：{{curseInstance?.credit}}分</p>
                <span class="user-num" v-if="curseInstance?.traineeNum">已有 {{curseInstance?.traineeNum}} 人参加</span>
              </div>
            </div>
            <!-- <div class="course-features">
              <span>认证成绩和证书</span>
            </div> -->
          </div>
          <div class="but-list">
            <div class="left-but">
              <el-button v-if="ifJoin" @click="addUser" type="primary" round class="join-button">立即报名</el-button>
              <el-button v-else @click="toLearn" type="primary" round class="join-button">进入学习</el-button>
              <!-- <el-button v-else @click="toLearn" type="primary" round class="join-button">该期课程已关闭</el-button> -->
            </div>
            <div class="right-icon" :class="{isCollect: isCollect }">
              <el-icon @click="handleCollection"><StarFilled /></el-icon>
              <span v-if="isCollect">已收藏</span>
              <span v-else>收藏</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 课程详情、评价、大纲、课程公告 -->
      <div class="course-content">
        <div class="course-tabs">
          <el-tabs v-model="activeTab" size="large">
            <el-tab-pane label="课程详情" name="details" v-if="courseInfo.description">
              <div class="course-overview" v-for="(item, index) in JSON.parse(courseInfo?.description)" :key="index">
                <h3 >{{item.descriptionName}}</h3>
                <div class="overview-content" style="white-space: pre-line;">
                  {{item.descriptionContent}}
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane :label="`课程评价(${totalRateData.total})`" name="reviews" >
              <!-- 课程评价内容 -->
              <div class="top-total">
                <div class="left-rate" v-if="rateData && rateData.length > 0">
                  <div class="num">{{totalRateData.avgRating}}</div>
                  <div class="rate">
                    <el-rate
                      v-model="totalRateData.avgRating"
                      disabled
                      text-color="#ff9900"
                    />
                    <p>共{{totalRateData.total}}条评价</p>
                  </div>
                </div>
                <div class="no-total-rate" v-else>暂无总评</div>
                <div class="right-box">
                  <div class="right-condition">
                    <span @click="changeCondition('all')" :class="{'selected' : checkCondition == 'all'}">全部</span>
                    <span @click="changeCondition('now')" :class="{'selected' : checkCondition == 'now'}">本次开课</span>
                  </div>
                  <!-- 这里立即评价需要判断用户是否参加课程 -->
                  <el-button type="primary" v-if="!ifJoin" disabled class="add-rate-but">该期课程未参加</el-button>
                  <el-button type="primary" v-else-if="canRate" @click="dialogVisible = true" class="add-rate-but">立即评价</el-button>
                  <el-button type="primary" v-else disabled class="add-rate-but">该期课程已评价</el-button>
                </div>
              </div>
              <!-- 评价分页 -->
              <div class="rate-list" v-if="rateData && rateData.length > 0">
                <div class="rate-item" v-for="item in rateData" :key="item.id">
                  <div class="left-avtor">
                    <img v-if="item.scaledUrl" :src="item.scaledUrl" alt="">
                    <!-- <img v-else src="" alt=""> -->
                  </div>
                  <div class="right-info">
                    <div class="top">
                      <div class="username">{{item?.userInfo?.name}}</div>
                      <el-rate
                        v-model="item.rating"
                        disabled
                        text-color="#ff9900"
                      />
                    </div>
                    <div class="rate-content">{{item.content}}</div>
                    <div class="time">发表于<span></span>{{ dayjs(item.createdAt).format("YYYY.MM.DD") }}<p>{{item.courseInstanceName}}</p></div>
                  </div>
                </div>
                <PaginationView
                  :isAffix = "false"
                  :total="queryData.total"
                  :pageSize="queryData.pageSize"
                  :currentPage="queryData.currentPage"
                  :allChoose="isAllChooseBtn"
                  :pageChoose="isPageChooseBtn"
                  :options="batchOptions"
                  :checkedNum="checkedNum"
                  :canChoose="queryData.total > 0"
                  @changeSize="handleSizeChange"
                  @currentChange="handleCurrentChange"
                  @changePageChoose="handlePageChoose"
                  @changeAllChoose="handleAllChoose"
                  @invertChoose="handleInvertChoose"
                  @checkOption="handleBatchOptions"
                  @refreshList="handleGetFormManageList"
                  @cancelChoose="handleResetPagination"
                  v-if="tableData.length > 0"
                />
              </div>
              <el-empty description="暂无评分数据" v-else />
            </el-tab-pane>
            <el-tab-pane label="课程大纲" name="outline" >
              <!-- 课程大纲 -->
              <el-tree ref="treeRef" :data="catalogueTree" :props="defaultProps" node-key="id" default-expand-all  draggable :allow-drop="allowDrop" @node-drop="handleDrop" @node-expand="handleNodeExpand" @node-collapse="handleNodeCollapse" class="category-tree" v-loading="treeLoading">
                <template #default="{ node, data }">
                  <div class="custom-tree-node">
                    <span class="tree-cell name-cell" :class="{ 'first-level': node.level == 1 }" :style="{ paddingLeft: (node.level) * 0 + 'px'}">
                      <template v-if="showLevel">{{ `${data.level} - ` }}</template>{{ data.name }}
                    </span>
                  </div>
                </template>
              </el-tree>
            </el-tab-pane>
            <el-tab-pane label="课程公告" name="notice" >
              <!-- 课程公告 -->
              <NoticeList v-if="noticeData && noticeData.length > 0" :noticeData="noticeData" :layout="false" />
              <el-empty description="暂无课程公告" v-else />
            </el-tab-pane>
          </el-tabs>
        </div>
        <div class="lecturer-list">
          <h3>授课老师</h3>
          <div class="lecturer-item" v-for="item in courseLecturers" :key="item.id" @click="showLeacturer(item)">
            <div class="lecturer-avatar">
              <img :src="item.avatar" v-if="item.avatar" alt="">
            </div>
            <div class="right-info">
              <div class="name">{{item.name}}</div>
              <div class="leacturer-position" v-if="currentLeacturer?.position">
                <!-- <div class="position-tit">讲师职称：</div> -->
                <div class="position-item" v-for="(item,index) in JSON.parse(currentLeacturer?.position)" :key="index">
                  <span v-if="index != 0">、</span>{{item.position}}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 填写评价 -->
    <el-dialog
      v-model="dialogVisible"
      :title="`填写《${courseInfo?.name || '课程'}》的评价`"
      width="600px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form
        ref="formRef"
        :model="formData"
        :rules="rules"
        label-width="70px"
      >
        <el-form-item label="打分" prop="rating">
          <el-rate
            v-model="formData.rating"
            :texts="['不满意', '待改进', '还可以', '挺不错', '非常好']"
            show-text
          />
        </el-form-item>
        <el-form-item label="评价内容" prop="content">
          <el-input v-model="formData.content" placeholder="请输入评价内容" :rows="5" type="textarea"/>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button
            type="primary"
            @click="confirmRate"
            >提交</el-button
          >
        </span>
      </template>
    </el-dialog>
    <!-- 讲师简介  -->
    <el-dialog
      v-model="leacturerVisible"
      title="讲师简介"
      width="700px"
      class="show-leacturer"
    >
      <div class="top-info">
        <div class="leacturer-name">
          {{currentLeacturer.name}}
        </div>
        <div class="leacturer-position">
          <!-- <div class="position-tit">讲师职称：</div> -->
          <div class="position-item" v-for="(item,index) in JSON.parse(currentLeacturer.position)" :key="index">
            <span v-if="index != 0">、</span>{{item.position}}
          </div>
        </div>
      </div>
      <div class="introduction" v-html="currentLeacturer.introduction"></div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted,  } from "vue";
import { 
  getCourseByUser, 
  getCourseLecturersLecturer, 
  addCollection, 
  deleteByIdCollection,
} from "@/api/course";
import { getCourseInstancesByCourseId, addCourseUser, getUserCourseInfo } from "@/api/instance";
import { useRoute, useRouter } from "vue-router";
import { getCourseChapterTree } from "@/api/chapter";
import dayjs from 'dayjs'
import { scaledAndCrop } from '@/api/file'
import { 
  ratingSubmit,
  ratingItemPaging,
  getCourseRatingDetail,
  getCourseInstanceRating,
  getMyRating
 } from "@/api/rate";
import { ElMessage } from "element-plus";
import { StarFilled } from "@element-plus/icons-vue";
import { tableList as mixTable } from '@ruifox-cms/utils'
import { getTargetAnnouncements } from "@/api/notice";
import NoticeList from "../../components/NoticeList.vue";
import { useStore } from "vuex"

const store = useStore() 
const route = useRoute();
const router = useRouter();
const courseInfo = ref({});
const isCollect = ref()

const getCourseByUserCourse = async () => {
  const courseId = route.query.id;
  const res = await getCourseByUser({ courseId: courseId });
  if (res.code === 20000) {
    courseInfo.value = res.data;
    console.log("课程信息", courseInfo.value);
    isCollect.value = courseInfo.value.userCourseCollectionId;
  }
};
//收藏课程
const collectionCourse = async () => { 
  const res = await addCollection({ type: 'COURSE(course,课程)',targetId: courseInfo.value.id });
  if(res.code === 20000){
    ElMessage.success('收藏成功');
    await getCourseByUserCourse();
  }
}
//取消收藏
const delCollection = async () => { 
  const res = await deleteByIdCollection({ id: courseInfo.value.userCourseCollectionId });
  if(res.code === 20000){
    ElMessage.success('取消收藏成功');
    await getCourseByUserCourse();
  }
}
const handleCollection = async () => {
  if (isCollect.value) {
    await delCollection(); // 调用取消收藏方法
  } else {
    await collectionCourse(); // 调用收藏方法
  }
};
const curseInstance = ref()
const curseInstanceId = ref()
const curseInstanceList = ref([]);
const getCurseInstanceList = async () => {
  const res = await getCourseInstancesByCourseId({courseId: route.query.id});
  if (res.code === 20000) {
    curseInstanceList.value = res.data;
    console.log("curseInstanceList.value",curseInstanceList.value);
    if(curseInstanceList.value.length > 0){
      curseInstance.value = curseInstanceList.value[curseInstanceList.value.length - 1]
      curseInstanceId.value = curseInstance.value.id
      getChapter()
      console.log("curseInstance.value",curseInstance.value);
    }
  }
};

const activeTab = ref("details")
//根据课程实例获取课程目录
const catalogueTree = ref()
const getChapter = async () => {
  const res = await getCourseChapterTree({courseInstanceId: curseInstance.value.id});
  if(res.code == 20000){
    catalogueTree.value = res.data;
  }
}
const ifJoin = ref(true)
const checkUserJoin = async () => { 
  const res = await getUserCourseInfo({courseInstanceId: curseInstance.value.id});
  if(res.code == 20000 ){
    ifJoin.value = false;
  } else {
    ifJoin.value = true;
  }
}
//更改实例 重新获取目录和公告
const changeCourseInstance = async () => {
  curseInstance.value = curseInstanceList.value.find(item => item.id === curseInstanceId.value);
  await getChapter()
  await checkUserJoin()
  //再次请求评分分页
  if(checkCondition.value == 'now'){
    await handleGetFormManageList();
    await checkInstanceRate();
  }
}
const toLearn = () => {
  router.push({
    name: 'courseLearn',
    query: {
      courseId: route.query.id,
      id: curseInstance.value.id
    }
  })
}

//用户报名课程
const addUser = async () => {
  const res = await addCourseUser({
    courseInstanceId: curseInstance.value.id,
    userIds: store.state.base.userInfo.id
  })
  if(res.code == 20000){
    ElMessage.success("报名成功");
    ifJoin.value = false
  }
}

//********获取评价
const {
  queryData,
  tableData,
  // tableLoading,
  checkedNum,
  isAllChooseBtn,
  isPageChooseBtn,
  // checkedList,
  // getTableData,
  // handleSearch,
  handleCurrentChange,
  handleSizeChange,
  handlePageChoose,
  handleAllChoose,
  handleInvertChoose,
  // handleCheckTable,
  handleResetPagination,
} = mixTable({
  getListApi: ratingItemPaging,
});
const defaultQuery = reactive({
  currentPage: 1,
  pageSize: 10,
  total:10,
  courseId:"",
  courseInstanceId: "",
  userId:"",
});
Object.assign(queryData, defaultQuery);
const rateData = ref([])
//获取评分数据后，裁剪重新获取头像图片
const processRateData = async () => {
  rateData.value = await Promise.all(rateData.value.map(async item => {
    try {
      const res = await scaledAndCrop({
        cropHeight: 80,
        cropWidth: 80,
        startX: null,
        startY: null,
        url: item.userInfo.avatar,
      });
      return {
        ...item,
        scaledUrl: res.code === 20000 ? res.data : item.userInfo.avatar
      };
    } catch (error) {
      return {
        ...item,
        scaledUrl: item.userInfo.avatar
      };
    }
  }));
};
const checkCondition = ref('all')
//获取评分数据
const handleGetFormManageList = async () => { 
  queryData.courseId = route.query.id;
  //按课程实例是否为空判断当前是查全部还是当前实例
  if(checkCondition.value == 'all'){
    queryData.courseInstanceId = "";
    getCourseRate()
  } else if(checkCondition.value == 'now'){
    queryData.courseInstanceId = curseInstance.value.id;
    getCourseInstanceRate()
  }
  let res = await ratingItemPaging(queryData)
  if(res.code == 20000){
    rateData.value = res.data.list
  }
  
  processRateData();
};  
//全部评价和当前课程实例评价切换
const changeCondition = async (condition) => {
  checkCondition.value = condition;
  await handleGetFormManageList();
  // 如果条件为 "now"，检查当前实例是否有用户评分
  if (checkCondition.value === 'now') {
    await checkInstanceRate();
  }
}

const canRate = ref(true)
//检查本期课程是否有评价
const checkInstanceRate = async () => {
  const myRateRes = await getMyRating({ courseInstanceId: curseInstance.value.id });

  if (myRateRes.code === 20000 && myRateRes.data) {
    canRate.value = false; // 用户已评价，禁用评价按钮

    // 将用户评分插入到评分列表的第一条
    rateData.value = rateData.value.filter(item => item.id !== myRateRes.data.id); // 去重
    rateData.value.unshift(myRateRes.data); // 插入用户评分
  } else {
    canRate.value = true; // 用户未评价，启用评价按钮
  }
}

const totalRateData = ref({
  avgRating: 0,
  total: 0
})
//获取课程总评分
const getCourseRate = async () => {
  const res = await getCourseRatingDetail({courseId: route.query.id});
  if(res.code == 20000){
    totalRateData.value.avgRating = res.data.avgRating
    totalRateData.value.total = res.data.total
    console.log("总评价数据", totalRateData.value);
    
  }
}

//获取课程实例总评分
const getCourseInstanceRate = async () => {
  const res = await getCourseInstanceRating({courseInstanceId: curseInstance.value.id});
  if(res.code == 20000){
    totalRateData.value.avgRating = res.data.avgRating
    totalRateData.value.total = res.data.ratingCount
    console.log("当前实例评价数据", totalRateData.value);

  }
}
//********评分
//评分显示
const defaultForm = ref({
  courseInstanceId: 0,
  rating: "",
  content: ""
})
const formData = ref({...defaultForm.value});
const rules = ref({
  rating: [
    { required: true, message: "请选择评分", trigger: "blur" }
  ],
  content: [
    { required: true, message: "请填写评价", trigger: "blur" }
  ]
});
//提交评价
const dialogVisible = ref(false);
const formRef = ref(null)
const confirmRate = async () => {
  const formEl = formRef.value;
  await formEl.validate(async (valid) => {
    if (valid) {
      if(curseInstance.value){
        formData.value.courseInstanceId = curseInstance.value.id
      }
      const res =  await ratingSubmit(formData.value);
      if(res.code == 20000){
        ElMessage.success('评价成功');
        dialogVisible.value = false;
        formData.value = {...defaultForm.value}
        handleGetFormManageList()
      }
    }
  })
}

//*******获取公告
const noticeData = ref([]);
const getNoticeData = async () => {
  const res = await getTargetAnnouncements({
    type: "COURSE_INSTANCE",
    targetId: curseInstance.value.id,
  });
  if (res.code === 20000) {
    noticeData.value = res.data;
    console.log("课程公告数据", noticeData.value);
    
  } 
}

//获取当前课程讲师
const courseLecturers = ref([]);
const getInstanceLeacturer = async () => {
  const res = await getCourseLecturersLecturer({courseId: route.query.id}); 
  if(res.code == 20000) {
    courseLecturers.value = res.data;
  } else {
    ElMessage.error('获取讲师信息失败');
  }
}
const leacturerVisible = ref(false)
const currentLeacturer = ref({})
const showLeacturer = (item) => {
  leacturerVisible.value = true;
  currentLeacturer.value = item;
  console.log("currentLeacturer.value",currentLeacturer.value);
  
}
// const parsedDescription = computed(() => {
//   try {
//     console.log("课程描述", courseInfo.value.description);
    
//     return courseInfo.value.description 
//       ? JSON.parse(courseInfo.value.description)
//       : [];
//   } catch (e) {
//     console.error('解析课程描述失败:', e);
//     return [];
//   }
// })


onMounted(async () => {
  await getCourseByUserCourse();
  await getCurseInstanceList();
  if(curseInstance.value){
    await getNoticeData();
    await getInstanceLeacturer();
    await handleGetFormManageList();
    await checkInstanceRate(); // 初次加载时检查当前实例是否有用户评分
    await checkUserJoin(); //检查用户当前实例加入状态
  }
});

</script>

<style lang="scss" scoped>
.function-header {
  margin-top: px2rem(40);
  font-weight: normal;
  font-size: px2rem(24);
}
.course-detail-container {
  margin: px2rem(40) 0;
  .course-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: px2rem(30);
    box-sizing: border-box;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: px2rem(10);
    .course-cover {
      position: relative;
      width: 45%;
      padding-bottom: 25%;
      border: 1px solid $borderColor;
      border-radius: px2rem(8);
      overflow: hidden;
      img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .course-details {
      width: 52%;
      font-size: px2rem(16);
      color: $black;
      .course-title {
        font-size: px2rem(24);
        color: $black;
        display: flex;
        align-items: center;
        .course-tags{
          margin-left: px2rem(10);
        }
      }
      .course-time-info{
        margin-top: px2rem(20);
        background: #f8f9fb;
        padding: px2rem(20);
        box-sizing: border-box;
        border-radius: px2rem(5);
        .info-p{
          margin-top: px2rem(15);
        }
        .course-status{
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: px2rem(15);

          .user-num{
            font-size: px2rem(14);
            color: #999;
          }
        }
      }
      .but-list{
        margin-top: px2rem(30);
        display: flex;
        align-items: center;
        justify-content: space-between;
        .right-icon{
          display: flex;
          align-items: center;
          i{
            font-size: px2rem(36);
            color: $borderColor;
          }
          &.isCollect{
            i{
              color: $warningColor;
            }
          }
        }
      }
    }
  }
  .course-content {
    margin: px2rem(40) 0;
    display: flex;
    .course-tabs{
      flex: 1;
      padding: px2rem(20) px2rem(30) px2rem(30);
      box-sizing: border-box;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      border-radius: px2rem(10);
      :deep(.el-tabs__item){
        font-size: px2rem(18);
      }
      .course-description{
        padding: px2rem(20);
        margin-top: px2rem(20);
        border-radius: px2rem(10);
        background: #f7f7f7;
        font-size: px2rem(16);
        color: $black;
        .description-name{
          text-align: end;
        }
      }
      .course-overview{
        margin-top: px2rem(20);
        h3{
          color: $black;
          font-size: px2rem(18);
        }
        .overview-content{
          margin-top: px2rem(15);
          color: $black_2;
          font-size: px2rem(16);
          text-indent: px2rem(32);
        }
      }
      .category-tree{
        .tree-cell{
          font-size: px2rem(16);
          color: #555;
          &.first-level{
            color: #222;
          }
        }
      }
      .top-total{
        display: flex;
        align-items: center;
        justify-content: space-between;
        .left-rate{
          display: flex;
          align-items: center;
          order: 1;
          .num{
            line-height: px2rem(64);
            font-size: px2rem(48);
            width: px2rem(72);
            color: #FF7A3E;
            font-weight: bold;
          }
          .rate{
            margin-left: px2rem(10);
            .el-rate{
              height: auto;
            }
            :deep(.el-rate__text){
              display: none;
            }
            p{
              font-size: px2rem(14);
              color: #999999;
            }
          }
        }
        .no-total-rate{
          font-size: px2rem(24);
          color: $black
        }
        .right-box{
          display: flex;
          align-items: center;
          order: 2;
          .right-condition{
            text-align: center;
            display: inline-block;
            padding: px2rem(6) px2rem(15);
            border: 1px solid #ededed;
            color: #999999;
            font-size: px2rem(14);
            span{
              border-right: 1px solid #E6E6E6;
              padding-right:  px2rem(12);
              cursor: pointer;
              font-size: px2rem(18);
              &:last-child{
                padding-right:  0;
                padding-left:  px2rem(12);
                border-right: none;
              }
              &.selected{
                color: $mainColor;
              }
            }
          }
          .add-rate-but{
            margin-left: px2rem(20);
          }
        }
      }
      .rate-list{
        margin-top: px2rem(20);
        .rate-item{
          padding: px2rem(15) 0;
          border-bottom: 1px solid $borderColor;
          display: flex;
          .left-avtor{
            width: px2rem(45);
            height: px2rem(45);
            box-shadow: 0 0 5px rgba(black,.1);
            border-radius: 50%;
            img{
              width: 100%;
              height: 100%;
              border-radius: 50%;
              object-fit: cover;
            }
          }
          .right-info{
            margin-left: px2rem(20);
            flex: 1;
            .top{
              display: flex;
              align-items: center;
              .username{
                font-size: px2rem(16);
                margin-right: px2rem(10);
                color: $black_2;
              }
              .el-rate{
                height: auto;
              }
            }
            .rate-content{
              font-size: px2rem(18);
              line-height: 1.5;
              margin-top: px2rem(10);
              color: $black;
            }
            .time{
              margin-top: px2rem(10);
              display: flex;
              color: #666;
              align-items: center;
              font-size: px2rem(16);
              line-height: px2rem(16);
              p{
                margin-left: px2rem(10);
              }
              span{
                margin-left: px2rem(5);
              }
            }
          }
        }
      }
    }
  
    .lecturer-list{
      display: flex;
      width: px2rem(350);
      margin-left: px2rem(30);
      flex-direction: column;
      padding: px2rem(30);
      box-sizing: border-box;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      border-radius: px2rem(10);
      height: max-content;
      h3{
        color: $black_2;
        font-size: px2rem(20);
        margin-bottom: px2rem(20);
      }
      .lecturer-item{
        margin-bottom: px2rem(10);
        padding-right: px2rem(10);
        display: flex;
        align-items: center;
        position: relative;
        cursor: pointer;
        .lecturer-avatar{
          width: px2rem(60);
          height: px2rem(60);
          border-radius: 50%;
          overflow: hidden;
          box-shadow: 0 0 5px rgba(0,0,0,0.1);
          img{
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
        .right-info{
          margin-left: px2rem(10);
          .name{
            color: $black;
            font-size: px2rem(16);
          }
          .leacturer-position{
            margin-top: px2rem(5);
            .position-item{
              color: $black_2;
              font-size: px2rem(14);
            }
          }
        }
      }
    }
  }
}
.show-leacturer{
  .top-info{
    display: flex;
    align-items: center;
    .leacturer-name{
      font-size: px2rem(24);
      color: $black;
      font-weight: bold;
    }
    .leacturer-position{
      display: flex;
      flex-wrap: wrap;
      margin-left: px2rem(20);
      .position-item{
        font-size: px2rem(18);
        color: $black_2;
      }
     
    }
  }
  .introduction{
    margin-top: px2rem(10);
    line-height: 1.5;
  }
}
</style>
